<template>
  <div class="my-clubs">
    <div class="page-header">
      <h1>我的社团</h1>
      <p>管理你加入的社团</p>
    </div>
    
    <!-- 社团列表 -->
    <div class="clubs-section">
      <el-row :gutter="20">
        <el-col
          v-for="club in myClubs"
          :key="club.id"
          :span="8"
          class="club-card-col"
        >
          <el-card class="club-card" shadow="hover">
            <div class="club-header">
              <el-avatar
                :size="60"
                :src="club.logo_url"
                class="club-logo"
              >
                {{ club.club_name.charAt(0) }}
              </el-avatar>
              <div class="club-info">
                <h3 class="club-name">{{ club.club_name }}</h3>
                <p class="club-role">{{ getRoleText(club.club_role) }}</p>
                <div class="club-stats">
                  <span class="join-time">
                    <el-icon><Calendar /></el-icon>
                    加入时间：{{ formatDate(club.join_time) }}
                  </span>
                </div>
              </div>
            </div>
            
            <div class="club-description">
              <p>{{ club.description || '暂无简介' }}</p>
            </div>
            
            <div class="club-actions">
              <el-button
                type="primary"
                @click="handleViewClub(club.id)"
              >
                进入社团
              </el-button>
              <el-button
                v-if="club.club_role > 0"
                type="success"
                @click="handleManageClub(club.id)"
              >
                管理社团
              </el-button>
              <el-button
                type="danger"
                @click="handleLeaveClub(club.id)"
              >
                退出社团
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 空状态 -->
    <div v-if="myClubs.length === 0" class="empty-state">
      <el-empty description="暂无加入的社团">
        <el-button type="primary" @click="goToClubSquare">
          去发现社团
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Calendar } from '@element-plus/icons-vue'

export default {
  name: 'MyClubs',
  components: {
    Calendar
  },
  setup() {
    const router = useRouter()
    
    const myClubs = ref([
      {
        id: 1,
        club_name: '摄影社团',
        logo_url: '',
        description: '用镜头记录美好瞬间，分享摄影技巧',
        club_role: 0, // 0: 成员, 1: 管理员, 2: 社长
        join_time: '2024-01-10 14:30:00'
      },
      {
        id: 2,
        club_name: '篮球社团',
        logo_url: '',
        description: '热爱篮球，享受运动，在球场上挥洒汗水',
        club_role: 1, // 管理员
        join_time: '2024-01-05 16:20:00'
      }
    ])
    
    const getRoleText = (role) => {
      const roleMap = {
        0: '普通成员',
        1: '管理员',
        2: '社长'
      }
      return roleMap[role] || '未知'
    }
    
    const formatDate = (dateTime) => {
      if (!dateTime) return '未知'
      const date = new Date(dateTime)
      return date.toLocaleDateString('zh-CN')
    }
    
    const handleViewClub = (clubId) => {
      console.log('查看社团:', clubId)
      // 跳转到社团详情页面
    }
    
    const handleManageClub = (clubId) => {
      console.log('管理社团:', clubId)
      router.push('/club-management/profile')
    }
    
    const handleLeaveClub = async (clubId) => {
      try {
        await ElMessageBox.confirm(
          '确定要退出该社团吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        // 这里实现退出社团逻辑
        ElMessage.success('已退出社团')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const goToClubSquare = () => {
      router.push('/discovery/club-square')
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      myClubs,
      getRoleText,
      formatDate,
      handleViewClub,
      handleManageClub,
      handleLeaveClub,
      goToClubSquare
    }
  }
}
</script>

<style lang="scss" scoped>
.my-clubs {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .clubs-section {
    .club-card-col {
      margin-bottom: 20px;
    }

    .club-card {
      height: 100%;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-2px);
      }

      .club-header {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;

        .club-logo {
          margin-right: 16px;
          flex-shrink: 0;
        }

        .club-info {
          flex: 1;
          min-width: 0;

          .club-name {
            margin: 0 0 4px;
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .club-role {
            margin: 0 0 8px;
            font-size: 14px;
            color: #409eff;
            font-weight: 500;
          }

          .club-stats {
            font-size: 12px;
            color: #606266;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }

      .club-description {
        margin-bottom: 16px;

        p {
          margin: 0;
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .club-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 0;
  }
}
</style>
